<template>
    <div class="number-change-page">
        <!-- 标题与介绍 -->
        <ToolHeader :title="title" :subtitle="subtitle"/>

        <div class="content-box">
            <!-- 模式选择 -->
            <div class="mode-buttons">
                <el-button-group>
                    <el-button
                            :class="{ 'active-btn': isToChinese }"
                            @click="setMode(true)"
                    >
                        数字转大写
                    </el-button>
                    <el-button
                            :class="{ 'active-btn': !isToChinese }"
                            @click="setMode(false)"
                    >
                        大写转数字
                    </el-button>
                </el-button-group>
            </div>

            <!-- 输入区域 -->
            <div class="input-group">
                <div class="input-item">
                    <span>输入数字：</span>
                    <el-input-number
                            v-model="numberInput"
                            :min="0"
                            :max="999999999"
                            :controls-position="'right'"
                            placeholder="请输入数字"
                            style="width: 100%;"
                            :disabled="!isToChinese"
                    />
                </div>
                <div class="input-item">
                    <span>输入大写：</span>
                    <el-input
                            v-model="chineseInput"
                            placeholder="请输入中文大写"
                            :disabled="isToChinese"
                    />
                </div>
            </div>

            <!-- 结果展示 -->
            <div class="result-box">
                <span>转换结果：</span>
                <el-input
                        v-model="result"
                        type="textarea"
                        rows="3"
                        readonly
                        placeholder=""
                />
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, watch, onMounted} from 'vue'
import {get, post} from '@/net/index.js'
import {ElMessage} from 'element-plus'
import ToolHeader from '@/components/ToolHeader.vue'
import {debounce} from 'lodash'

// 标题与副标题
const title = ref('')
const subtitle = ref('')

// 模式和输入数据
const isToChinese = ref(true)
const numberInput = ref(55)
const chineseInput = ref('伍拾伍')
const result = ref('')

// 获取工具信息
function loadInfo() {
    get(
        '/api/mathTool/getInfo?path=number_change',
        (data) => {
            if (data) {
                title.value = data.title || ''
                subtitle.value = data.introduction || ''
            }
        },
        (err) => {
            ElMessage.error('获取工具信息失败：' + err)
        }
    )
}

// 调用后端接口转换
function doConvert() {
    const payload = {
        type: isToChinese.value ? 'numberToChinese' : 'chineseToNumber',
        text: isToChinese.value ? numberInput.value.toString() : chineseInput.value,
    }
    post(
        '/api/mathTool/getNumberChangeResult',
        payload,
        (data) => {
            result.value = data.result || ''
        },
        (err) => {
            result.value = ''
            ElMessage.error('转换失败：' + err)
        }
    )
}

// 防抖包装请求函数
const debouncedConvert = debounce(() => {
    doConvert()
}, 500)

// 切换模式
function setMode(toChinese) {
    isToChinese.value = toChinese
    result.value = ''
    doConvert()
}

// 监听数字输入，仅数字转大写时触发
watch(numberInput, () => {
    if (!isToChinese.value) return
    debouncedConvert()
})

// 监听大写输入，仅大写转数字时触发
watch(chineseInput, () => {
    if (isToChinese.value) return
    debouncedConvert()
})

onMounted(() => {
    loadInfo()
    debouncedConvert()
})
</script>

<style scoped>
.number-change-page {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.content-box {
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mode-buttons {
    display: flex;
    justify-content: center;
}

/* 高亮选中的按钮 */
::v-deep(.el-button.active-btn) {
    background-color: #409eff;
    color: white;
    border-color: #409eff;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.input-item span {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

.result-box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
</style>
